import { Resume, ResumeSkilltxt } from '@/interface/resume'
import { List } from 'ant-design-vue'
import { clone, isEmpty, isNil, map } from 'ramda'
import { computed, defineComponent, PropType, ref } from 'vue'
import { useRoute } from 'vue-router'
import { errorTips, successTips } from '@/utils'
import { LoadingOutlined } from '@ant-design/icons-vue'
const props = {
	dataSource: {
		type: Object as PropType<Resume>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	emits: ['getResume'],
	setup(props, { emit }) {
		const userId = localStorage.getItem('userId') as string
		const $route = useRoute()
		const pageState = ref({
			isEdit: false,
			loading: false,
			data: {} as Resume,
		})
		/** 是否编辑 */
		const isEdit = computed(() => {
			return !isNil($route.params.id)
		})
		function onEdit() {
			pageState.value.data.resumeSkill = clone(props.dataSource.resumeSkill)
			pageState.value.data.resumeSkilltxt = clone(props.dataSource.resumeSkilltxt)
			if (isEmpty(pageState.value.data.resumeSkill)) {
				pageState.value.data.resumeSkill = [{ count: 0 }, { count: 0 }, { count: 0 }]
			}
			if (isEmpty(pageState.value.data.resumeSkilltxt)) {
				pageState.value.data.resumeSkilltxt = [{}, {}, {}, {}, {}]
			}
			pageState.value.isEdit = true
		}
		async function onSubmit() {
			const isTitle = pageState.value.data.resumeSkill?.some((item) => isNil(item.title) || isEmpty(item.title))
			if (isTitle) {
				errorTips('请输入掌握的技能标题')
				return
			}
			pageState.value.loading = true
			const { success } = await API.blog.resume.updateSkill.request({
				resumeId: pageState.value.data.id,
				resumeSkill: pageState.value.data.resumeSkill,
				userId,
			})
			const { success: skillTextSuccess } = await API.blog.resume.updateSkillText.request({
				resumeId: pageState.value.data.id,
				resumeSkilltxt: pageState.value.data.resumeSkilltxt,
				userId,
			})
			pageState.value.loading = false
			if (success && skillTextSuccess) {
				successTips('更新技能列表成功')
				onCancel()
				emit('getResume', pageState.value.data)
			}
		}
		function onCancel() {
			pageState.value.isEdit = false
			pageState.value.loading = false
			pageState.value.data = {}
		}
		return () => (
			<div class="about-me" id="skills-section">
				<a-row>
					<a-col span={10} class="skills-column">
						<h4>掌握的技能</h4>
						<a-row class="skills">
							{map((item) => {
								return (
									<a-col span={24}>
										<div class="skill-block">
											<div class="skill-block-inner">
												<div class="skill-title">
													{!pageState.value.isEdit ? (
														item.title
													) : (
														<a-input v-model={[item.title, 'value']} placeholder="请输入标题" />
													)}
												</div>

												{!pageState.value.isEdit ? (
													<div class="bar">
														<div
															class="bar-inner count-bar counted"
															data-percent={`${item.count}%`}
															style={{ width: `${item.count}%` }}
														>
															<div class="count-box counted">
																<span class="count-text" data-stop={item.count} data-speed="2000">
																	{item.count}
																</span>
																%
															</div>
														</div>
													</div>
												) : (
													<a-slider v-model={[item.count, 'value']} />
												)}
											</div>
										</div>
									</a-col>
								)
							}, (pageState.value.isEdit ? pageState.value.data?.resumeSkill : props.dataSource?.resumeSkill) ?? [])}
						</a-row>
					</a-col>
					<a-col span={14}>
						<h4>专业技能</h4>
						<a-list
							size="large"
							bordered
							dataSource={
								pageState.value.isEdit ? pageState.value.data.resumeSkilltxt : props.dataSource?.resumeSkilltxt
							}
							renderItem={({ item, index }: any) => {
								return (
									<List.Item>
										{!pageState.value.isEdit ? (
											item.text
										) : (
											<a-input
												v-model={[(pageState.value.data.resumeSkilltxt as ResumeSkilltxt[])[index].text, 'value']}
											/>
										)}
									</List.Item>
								)
							}}
						/>
						{isEdit.value && (
							<div class="edit" style={{ right: '10px' }}>
								{pageState.value.isEdit ? (
									<a-button type="primary" onClick={onEdit}>
										编辑
									</a-button>
								) : (
									<>
										<a-button type="primary" loading={pageState.value.loading} onClick={onSubmit}>
											确认
										</a-button>
										<a-button loading={pageState.value.loading} onClick={onCancel}>
											取消
										</a-button>
									</>
								)}
							</div>
						)}
					</a-col>
				</a-row>
				{pageState.value.loading && <LoadingOutlined style="font-size: 40px" class="loadingOutlined flexBox" />}
			</div>
		)
	},
})
